<template>
  <div>
    <echarts-view :options="option" height="116px"></echarts-view>
  </div>
</template>

<script>
import echartsView from '@/components/ECharts'
export default {
  props: {
    scale: {
      type: Number,
      default: 0
    }
  },
  components: {
    echartsView
  },
  data () {
    return {
      option: {
        series: [
          {
            type: 'gauge',
            startAngle: 220,
            endAngle: -45,
            min: 0,
            max: 100,
            radius: '100%',
            splitNumber: 10,
            itemStyle: {
              color: 'rgba(125, 64, 255, 1)',
              shadowColor: 'rgba(5, 45, 255, 0.46)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            progress: {
              show: true,
              roundCap: true,
              width: 10
            },
            pointer: {
              show: false
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 10
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 12,
              lineStyle: {
                width: 3,
                color: '#999'
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              offsetCenter: [0, '-5%'],
              valueAnimation: true,
              formatter: function (value) {
                return '{value|' + value.toFixed(0) + '}{unit|%}'
              },
              rich: {
                value: {
                  fontSize: 14,
                  fontWeight: 'bolder',
                  color: '#777'
                },
                unit: {
                  fontSize: 14,
                  color: '#999'
                }
              }
            },
            data: [
              {
                value: this.scale
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
